<template>
    <div class="newPrimaryClass">
        <div class="newPrimaryClass_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">新增商品推荐<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPrimaryClass_type">
            <div>商品列表/<span class="text">新增商品推荐</span></div>
            <el-button @click="toBack" type="success">返回</el-button>
        </div>

        <!-- 内容 -->
        <div class="contentBox">
            <h3>基础信息</h3>
            <div class="item">
                <div class="tit">选择卖场</div>
                <el-select
                  v-model="marketId"
                  clearable
                  @change="selectMarket"
                  filterable
                  placeholder="请选择卖场"
                >
                  <el-option
                    v-for="item in marketList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
            </div>
            <div class="item">
                <div class="tit">排序</div>
                <el-input type="number" v-model="sort"></el-input>
            </div>
            <div class="item">
                <div class="tit">商家类别</div>
                <el-radio-group v-model="sale_type" @change="selectSaleType">
                    <el-radio label="1">家居类</el-radio>
                    <el-radio label="2">泛家居类</el-radio>
                </el-radio-group>
            </div>
            <div class="item">
                <div class="tit">推荐商品</div>
                <el-input v-model="shopInput" @input="changeInput"></el-input>
                <el-button type="primary" @click="searchShop">搜索</el-button>
            </div>
            <div class="shopBox" v-if="shopList.length">
               <div class="shopItem" v-for="(item,index) in shopList" :key="index">
                    <img :src="item.main_imgurl" alt="">
                    <div class="title">{{item.product_title}}</div>
                    <el-button @click="toSelectShop(item)">选择</el-button>
               </div>
                <p @click="openMore">{{moreTxt}}</p>
            </div>
            <div class="shopBox" style="border:0" v-if="!shopList.length">
               <div style="text-align:center;" v-if="shopStatus">暂无数据~</div>
            </div>
            <div class="selectShopBox" v-if="Object.keys(this.selectShop).length!=0">
                <img :src="selectShop.main_imgurl" alt="">
                <div class="tit">{{selectShop.product_title}}</div>
                <div>品牌：{{selectShop.store_name}}<span>分类：{{selectShop.cate_name}}</span></div>
                <div>价格：￥{{selectShop.price}}</div>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="toSubmit">确定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            shopInput:'',
            page:1,
            pagesize:10,
            store:'',
            sort:'',
            shopList:[],
            selectShop:{},//已选择商品
            shopStatus:false,
            moreTxt:'点击加载更多',
            sale_type:'1',
            marketList:[], //卖场列表
            marketId:'', //已选卖场id
        }
    },
    mounted(){
      this.remoteMethod()
    },
    methods:{
        // 获取卖场列表
        remoteMethod() {
          this.$http.post("/api/root/Market/marketList").then((res) => {
            console.log(res, "卖场列表");
            if (res.code == 1) {
              this.marketList = res.data ? res.data : [];
            }
          });
        },
        // 选择卖场
        selectMarket() {
          this.shopList = []
          this.selectShop = {}
        },
        // 返回
        toBack(){
            this.$router.back(1)
        },
        // 加载更多
        openMore(){
            this.page++
            let params = {
                keyword:this.shopInput,
                page:this.page,
                pagesize:this.pagesize,
                store:this.store,
                sale_type:this.sale_type,
                market_id:this.marketId
            }
            this.$http.post('/api/root/ProductShop/lst',params).then(res=>{
                console.log(res,'商品列表')
                if(res.code==1){
                    if(!res.data.data.length){
                        this.moreTxt = '没有更多了~'
                        return
                    }
                    this.shopList = this.shopList.concat(res.data.data)
                }
            })
        },

        // 获取商品列表
        getShopList(){
            if(this.marketId==''){
              this.$message.warning('请先选择卖场')
              return
            }
            this.shopStatus = false
            this.page = 1
            let params = {
                keyword:this.shopInput,
                page:this.page,
                pagesize:this.pagesize,
                store:this.store,
                sale_type:this.sale_type,
                market_id:this.marketId
            }
            this.$http.post('/api/root/ProductShop/lst',params).then(res=>{
                console.log(res,'商品列表')
                if(res.code==1){
                    if(!res.data.data.length){
                        this.shopStatus = true
                    }
                    this.shopList = res.data.data?res.data.data:[]
                }
            })
        },

        // 选择类别
        selectSaleType(){
            this.shopList = [] 
            this.selectShop = {}
        },

        // 搜索确定按钮
        searchShop(){
            if(this.shopInput==''){
                this.$message.warning('请输入商品信息')
                return 
            }
            this.moreTxt = '点击加载更多'
            this.getShopList()
        },

        // 选择按钮
        toSelectShop(item){
            this.selectShop = item
            this.shopList = []
        },

        // input为空
        changeInput(){
            this.shopStatus = false
            if(this.shopInput==""){
                this.shopList=[]
            }
        },

        // 确定按钮
        toSubmit(){
            if(this.marketId==''){
              this.$message.warning("请选择卖场");
              return;
            }
            if(this.sort==''){
                this.$message.warning('请输入排序值')
                return
            }
            if(Object.keys(this.selectShop).length==0){
                this.$message.warning('请选择商品')
                return 
            }
            let params = {
                product_id:this.selectShop.product_id,
                sort:this.sort,
                sale_type:this.sale_type,
                market_id:this.marketId
            }
            this.$http.post('/api/root/ProductShop/addHomeProduct',params).then(res=>{
                console.log(res,'添加结果')
                if(res.code==1){
                    this.$message.success('添加成功')
                    this.selectShop = {}
                    this.$router.back(1)
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

    }
}
</script>

<style lang="less">
    @import 'recommendShopAdd.less';
</style>


